import React, { Component } from 'react'
import { Icon, Button } from 'antd'
import style from './style.css'

export default class AccountPage extends Component {
  render() {
    return (
      <div className="rt-account-container">
        <div className={`${style.top} rt-user-info`}>
          <div className={`rt-user-avatar`}>
            {/*<img alt="avatar" />*/}
          </div>

          <div className={`rt-user-nickname`}>微信名：vp2016</div>

          <div className={`rt-placeholder`}></div>

          <Icon type="right" />
        </div>

        <div className={`rt-account-coupon`}>
          <div className={`rt-box`}>
            <div className={`rt-text`}>账户余额（元）</div>
            <div className={`rt-num`}>323,686.90</div>
            <div className={`rt-btn-box`}>
              <Button><Icon type="question" />充值</Button>
            </div>
          </div>

          <div className="rt-placeholder"></div>

          <div className={`rt-box`}>
            <div className={`rt-text`}>赠券余额：</div>
            <div className={`rt-num ${style.coupon}`}>800.00元</div>
            <div className={`rt-btn-box`}>
              <Button className={`${style.deposit}`}><Icon type="question" />提现</Button>
            </div>
          </div>
        </div>

        <div className={`rt-row-img-box`}>
          <div className={`rt-icon-box`}>
            <Icon type="question" />
          </div>
          <div className={`rt-text`}>实名认证</div>
          <div className={`rt-placeholder`}></div>
          <div>
            <img src="../../statics/images/rz_lw.png" />
          </div>
          <div>
            <img src="../../statics/images/rz_l.png" />
          </div>
          <Icon type="right" />
        </div>

        <div className={`rt-row-box`}>
          <div className={`rt-icon-box`}>
            <Icon type="question" />
          </div>
          <div className={`rt-text`}>持仓明细</div>
          <div className={`rt-placeholder`}></div>
          <Icon type="right" />
        </div>

        <div className={`rt-row-box`}>
          <div className={`rt-icon-box`}>
            <Icon className={`rt-bg-history`} type="question" />
          </div>
          <div className={`rt-text`}>历史交易</div>
          <div className={`rt-placeholder`}></div>
          <Icon type="right" />
        </div>

        <div className={`rt-row-box`}>
          <div className={`rt-icon-box`}>
            <Icon className={`rt-bg-coupon`} type="question" />
          </div>
          <div className={`rt-text`}>赠券</div>
          <div className={`rt-placeholder`}></div>
          <Icon type="right" />
        </div>

        <div className={`rt-row-box`}>
          <div className={`rt-icon-box`}>
            <Icon className={`rt-bg-bankcard`} type="question" />
          </div>
          <div className={`rt-text`}>银行卡</div>
          <div className={`rt-placeholder`}></div>
          <Icon type="right" />
        </div>
      </div>
    )
  }
}